<script setup>
import {useRouter} from 'vue-router';
import {onMounted, onUnmounted, ref} from "vue";

const router = useRouter()

function changRouter(path) {
  router.push(path)
}

changRouter("xian")

const init_center_width = (center_div) => {
  const divWidth = document.getElementById('app').offsetWidth * 0.90;
  center_div.value.style.width = divWidth + 'px';
}

const center = ref()
// 初始化 宽度
onMounted(() => {
  const boundHandleResize = () => init_center_width(center);
  window.addEventListener('resize', boundHandleResize);

  boundHandleResize()
})

onUnmounted(() => {
  window.removeEventListener('resize', init_center_width);
})
</script>

<template>
  <div class="center_class" ref="center">
    <router-view :changRouter="changRouter"/>
  </div>
</template>

<style scoped>
.center_class{
  width: 100%;
  height: 100%;

  margin: 0 auto;

  border-radius: 5px;
  border: 1px solid #eae3e2;
  box-shadow: 0 0 10px 6px #fbfbfb;
}
</style>
